<template>
    <!-- 搜索工作栏 -->
    <div class="header competitionManage-company">
      <div class="search-tools">
        <SearchBar
          v-if="searchConfig"
          ref="formParams"
          :search-config="searchConfig"
          label-width="75px"
          label-position="right"
          style="margin: 0 0 15px 0"
          :slotSpan="4"
          @transferSearchParams="transferSearchParams"
          @search="handleSearch"
          @resetSearch="resetSearch"
        />
      </div>
      <Table
        ref="tableList"
        class="student-msg-table"
        :table-config="tableConfig"
        :table-data="tableData"
        :total="total"
        :page-no="pageNo"
        :page-size="pageSize"
        @sortChange="sortChange"
        @handleSelectionChange="(val) => { tableSelectList = val }"
        @handleChangePage="handleChangePage"
      >
        <template slot="entryNum" slot-scope="scope">
          <div style="color: #409eff; cursor: pointer;" @click="handleToTeamList(scope.data.row)">{{ scope.data.row.entryNum }}</div>
        </template>
        <!-- <el-table-column align="center" label="操作" width="160">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
            <el-button type="primary" size="mini" @click="handleAudit(scope.row)">审核</el-button>
          </template>
        </el-table-column> -->
      </Table>
      <AuditPop ref="auditPop" @success="getList" />
      <AddDetailPop ref="addDetailPop" />
    </div>
  </template>
  <script>
  import { statusList, leftSearchConfig, leftTableConfig } from './initData'
  import SearchBar from '@/views/components/SearchBar'
  import Table from '@/views/components/Table'
  import ViewNews from './components/viewNews.vue'
  import { deleteMsg, getMsgTypeList } from '@/api/inner-msg/index.js';
  import { getTableList, getProDetailApi } from './api'
  import AuditPop from './components/auditPop.vue';
  import { getProTypes } from '@/views/projectManageCompany/api/index.js'
  import { formatDate } from '@/utils/index.js';
  import AddDetailPop from '@/views/projectManageCompany/projectList/components/addDetailPop.vue'
  // import {  }
  export default {
    name: 'NewsList',
    components: {
      SearchBar,
      Table,
      ViewNews,
      AuditPop,
      AddDetailPop
    },
    data() {
      return {
        searchConfig: JSON.parse(JSON.stringify(leftSearchConfig)),
        tableConfig: leftTableConfig,
        tableData: [],
        total: 0,
        pageNo: 1,
        pageSize: 10,
        tableSelectList: [],
        searchParams: {},
        sortingFields: null,
        columnList: []
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      transferSearchParams(params) {
        this.searchParams = params
        // this.handleSearch();
      },
      resetSearch() {
        this.sortingFields = null
        this.searchParams = {}
        this.$refs.tableList && this.$refs.tableList.$children[0].clearSort()
        this.handleSearch()
      },
      handleSearch() {
        this.pageNo = 1
        this.getList()
      },
      async getList() {
        const params = {}
        for (const key in this.searchParams) {
          if (this.searchParams[key] || this.searchParams[key] === 0) {
            params[key] = this.searchParams[key]
          }
        }
        const { code, data } = await getTableList({
          ...params,
          scheduleType: 1,
          sortField: this.sortingFields ? this.sortingFields[0] : null,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        })
  
        if (code === 0) {
          const list = data.list.map(v => {
            return {
              ...v,
              releaseTimeStr: formatDate(v.releaseTime),
              replyTimeStr: formatDate(v.replyTime),
              createTimeStr: formatDate(v.createTime),
              updateTimeStr: formatDate(v.updateTime),
              statusStr: this.getStatusWord(v.status)
            }
          })
          this.tableData = list
          this.total = data.total
        } else {
          this.tableData = []
        }
      },
  
      getStatusWord(status) {
        // statusList
        const obj = statusList.find(v => v && v.value === status)
        return obj ? obj.label : ''
      },
  
      // 详情弹窗关闭，再次调接口获取状态
      handleClose() {
        this.getList()
      },
  
      handleSuccessCall() {
        this.$message.success('操作成功')
        this.tableSelectList = []
        this.getList()
      },
  
      // 切换页码、页数
      handleChangePage({ pageNo, pageSize }) {
        this.pageNo = pageNo
        this.pageSize = pageSize
        this.getList()
      },
  
      async columnListApi() {
        let columnList = [];
        const { code, data } = await getProTypes();
        if (code === 0 && data && data && data.length > 0) {
            columnList = data.map(v => {
                return {
                    label: v.name,
                    value: v.id
                }
            });
        }
        return columnList;
      },
  
      // 查看
      async handleView(row) {
        this.columnList = await this.columnListApi();
        this.$refs.addDetailPop && this.$refs.addDetailPop.open({ popType: 'view', id: row.id, columnList: this.columnList, API: getProDetailApi });
      },
  
      // 审核 
      handleAudit(row) {
        this.$refs.auditPop && this.$refs.auditPop.open({ title: row.title, id: row.id });
      },
      handleDelete({ id }) {
        this.$confirm('是否确认删除?', '提示').then(async() => {
          const { code, msg } = await deleteMsg({
            id
          })
          if (code !== 0) {
            this.$message.error(msg)
            return
          }
          this.$message.success('删除成功')
          this.handleSearch()
        })
      },
  
      // 点击排序
      sortChange(sortingFields) {
        const newFields = sortingFields ? sortingFields.map(v => {
          return {
            ...v,
            field: 't.' + v.field,
          }
        }) : null;
        this.sortingFields = newFields;
        this.handleSearch()
      },
      handleToTeamList(row) {
        this.$router.push({
            path: '/projectManageCompany/competitionTeamList',
            query: {
              projectId: row.id,
              scheduleType: 1,
              projectName: row.title
            }
        })
      }
    }
  }
  </script>
  <style lang="scss">
  .competitionManage-company {
    .search-result-table {
      .el-table__cell {
          position: relative;
          padding: 20px 0;
      }
    }
    .basic-table {
      .el-table__body-wrapper {
        height: calc(100vh - 290px);
      }
    }
    .basic-table::before {
      height: 0;
    }

    .pagination-container {
      padding: 0 !important;
    }
  }
  </style>
  <style lang='scss' scoped>
      .header {
          display: flex;
          flex-direction: column;
          padding: 0 20px;
  
          .search-tools {
              display: flex;
              justify-content: space-between;
          }
  
          .title-box {
              // position: relative;
  
              .ranking-icons {
                  position: absolute;
                  left: 0;
                  top: 0;
  
                  .icon-item {
                      color: blue;
                      border: 1px solid blue;
                      margin-right: 3px;
                      padding: 0 2px;
                  }
              }
          }
          .btns {
              color: #02A7F0;
              cursor: pointer;
              display: inline-block;
              margin-right: 10px;
          }
          .delete {
              color: #f56c6c;
          }
      }
  </style>
  